import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text, Input, Picker, Textarea, Form, Button} from "@tarojs/components";
import {AtImagePicker} from 'taro-ui'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import './company_auth.less'
import {getRuntime, natureOfTheFirmArr, enterpriseScaleArr, userSex} from '../../utils/common'
import right from "../../assets/img/right.png";
import PickerArea from "../../components/PickerArea";

// 我的，企业认证
interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    info: {}, // 认证信息
    companyName:'', // 企业名称 ,
    natureOfTheFirmArr:natureOfTheFirmArr, // 企业性质 ,
    natureOfTheFirm:'', // 企业性质 ,
    enterpriseScaleArr:enterpriseScaleArr, // 企业规模 ,
    enterpriseScale:'', // 企业规模 ,
    certificateIMGArr:[], // 营业执照图片 ,
    certificateIMG:'', // 营业执照图片 ,
    enterpriseIntroduce:'', // 企业简介
    area:'', // 企业地址 ,
    areaShow: '',
    areaDetail: '',
    contactsName:'', // 联系人姓名 ,
    phoneNumnber:'', // 联系电话 ,
    wechatNumber:'', // 联系微信号 ,
    qqNumber:'', // 联系QQ号 ,
    isAuth: false
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'企业认证' })
    this.getUserEnterpriseCertificationInfo()
  }

  getUserEnterpriseCertificationInfo() {
    let { userStore } = this.props.stores
    userStore.getUserEnterpriseCertificationInfo({
      callback: res => {
        if(res){
          this.setState({
            info: toJS(res),
            natureOfTheFirm: toJS(res.natureOfTheFirm),
            enterpriseScale: res.enterpriseScale,
            area: res.area&&res.area.split('@')[0] || '',
            areaDetail: res.area&&res.area.split('@')[1] || ''
          }, () => {
            if(Object.keys(res).length !== 0) { // 判断对象是否为空
              this.setState({ isAuth: true })
            }
          })
        }
      }
    })
  }

  changePicker(field:string,e) {
    this.setState({
      [field]: this.state[field+'Arr'][e.detail.value]
    })
  }

  onChangeImg(type: string, e) {
    if(e.length <= 0) { return false }
     console.log(e)
    getRuntime().uploadFile(e, res => {
      this.setState({
        [type]: res.join(','),
        [type+'Arr']: e
      })
    })
  }

  pickerArea(res) {
    this.setState({
      area: res.province.label+res.city.label+res.distract.label
    })
  }

  changeIsAuth() {
    this.setState({ isAuth: false })
  }

  submit(e) {
    let { natureOfTheFirm,enterpriseScale,certificateIMG,area,info } = this.state
    let { companyName,contactsName,phoneNumnber,wechatNumber,qqNumber,areaDetail,enterpriseIntroduce  } = e.detail.value
    if(!natureOfTheFirm){ getRuntime().showToast('请选择企业性质~'); return false}
    if(!enterpriseScale){ getRuntime().showToast('请选择企业规模~'); return false}
    if(!certificateIMG){ getRuntime().showToast('请上传营业执照~'); return false}
    if(!area){ getRuntime().showToast('请选择公司地址~'); return false}
    if(!companyName){ getRuntime().showToast('请填写公司名称~'); return false}
    if(!contactsName){ getRuntime().showToast('请填写联系人姓名~'); return false}
    if(!phoneNumnber){ getRuntime().showToast('请填写联系人电话~'); return false}
    let { userStore } = this.props.stores
    userStore.saveEnterpriseCertification({
      form: {
        companyName,natureOfTheFirm,enterpriseScale,certificateIMG,area: area+'@'+areaDetail,
        contactsName,phoneNumnber,wechatNumber,qqNumber,enterpriseIntroduce,
        id: info.id ? info.id : ''
      },
      callback: () => {
        getRuntime().showToast('数据保存成功，等待管理员审核~')
        // setTimeout(() => { getRuntime().navigateBack() }, 2000)
        this.getUserEnterpriseCertificationInfo()
      }
    })
  }

  render() {
    let { info,isAuth,natureOfTheFirmArr,natureOfTheFirm,enterpriseScaleArr,enterpriseScale,certificateIMGArr,area,areaDetail } = this.state
    return (
      <View className='company_auth'>
        {isAuth&& // 信息详情
           <View className='from-wrap'>
              <View className='item-group-title'>－ 基本信息 －</View>
              <View className='item-lawyer' style={{marginBottom: '10px'}}>
                 <View className='line'>
                    <Text className='title'>企业名称：</Text>
                    <Text className='name'>{info.companyName}</Text>
                 </View>
                 <View className='line'>
                    <Text className='title'>企业性质：</Text>
                    <Text className='name'>{info.natureOfTheFirm}</Text>
                 </View>
                 <View className='line'>
                    <Text className='title'>企业规模：</Text>
                    <Text className='name'>{info.enterpriseScale}</Text>
                 </View>
                 <View className='line'>
                    <Text className='title'>企业地址：</Text>
                    <Text className='name'>{info.area}</Text>
                 </View>
              </View>
              <View className='item-group-title'>－ 企业简介 －</View>
              <View className='item-lawyer-desc'>
                {info.enterpriseIntroduce}
              </View>
              <View className='item-group-title' style={{marginTop: '10px'}}>－ 联系方式 －</View>
              <View className='item-lawyer'>
                 <View className='line'>
                    <Text className='title'>联系人：</Text>
                    <Text className='name'>{info.contactsName}</Text>
                 </View>
                 <View className='line'>
                    <Text className='title'>联系电话：</Text>
                    <Text className='name'>{info.phoneNumnber}</Text>
                 </View>
                 <View className='line'>
                    <Text className='title'>微信号：</Text>
                    <Text className='name'>{info.wechatNumber}</Text>
                 </View>
                 <View className='line'>
                    <Text className='title'>QQ号：</Text>
                    <Text className='name'>{info.qqNumber}</Text>
                 </View>
              </View>
              <View className='page-submit' onClick={this.changeIsAuth.bind(this)}>编辑</View>
           </View>
        }
        {!isAuth&& // 保存、编辑信息
        <Form onSubmit={this.submit.bind(this)}>
           <View className='from-wrap'>
              <View className='item-group-title'>－ 基本信息 －</View>
              <View className='item-group pt0 pb0'>
                 <View className='input-group'>
                    <View className='input-name'>企业名称</View>
                    <Input className='from-input' name='companyName'
                           placeholderClass='placeholder_class' placeholder='请填写企业名称' value={info.companyName} />
                 </View>
                 <View className='input-group'>
                    <View className='input-name'>企业性质</View>
                    <Picker className='input-picker' mode='selector' range={natureOfTheFirmArr} onChange={this.changePicker.bind(this,'natureOfTheFirm')}>
                       <View className='tt'>
                         {!natureOfTheFirm&& <View className='from-input picker-con placeholder-class'>点击选择</View>}
                         {natureOfTheFirm&& <View className='from-input picker-con'>{natureOfTheFirm}</View>}
                          <Image className='drop-down-icon' src={right} />
                       </View>
                    </Picker>
                 </View>
                 <View className='input-group'>
                    <View className='input-name'>企业规模</View>
                    <Picker className='input-picker' mode='selector' range={enterpriseScaleArr} onChange={this.changePicker.bind(this,'enterpriseScale')}>
                       <View className='tt'>
                         {!enterpriseScale&& <View className='from-input picker-con placeholder-class'>点击选择</View>}
                         {enterpriseScale&& <View className='from-input picker-con'>{enterpriseScale}</View>}
                          <Image className='drop-down-icon' src={right} />
                       </View>
                    </Picker>
                 </View>
                 <View className='input-group'>
                    <View className='input-name'>企业地址</View>
                    <PickerArea onPicketArea={this.pickerArea.bind(this)} areaData={area} />
                 </View>
                 <View className='input-group'>
                    <View className='input-name'>详细地址</View>
                    <Input className='from-input' placeholderClass='placeholder_class' name='areaDetail' value={areaDetail} placeholder='请填写企业详细地址' />
                 </View>
                 <View className='input-group input-upload bbnone'>
                    <View className='input-name'>上传营业执照</View>
                    <AtImagePicker
                        length={4}
                        count={2}
                        showAddBtn={certificateIMGArr.length<1}
                        files={certificateIMGArr}
                        onChange={this.onChangeImg.bind(this,'certificateIMG')}
                    />
                 </View>
              </View>
              <View className='item-group-title'>－ 企业简介 －</View>
              <View className='input-group'>
                 <View className='input-group'>
                    <Textarea className='from-textarea' placeholderClass='placeholder-class' placeholder='请填写企业简介'
                              maxlength={-1} name='enterpriseIntroduce' value={info.enterpriseIntroduce} />
                 </View>
              </View>
              <View className='item-group-title'>－ 联系方式 －</View>

              <View className='item-group pt0 pb0'>
                 <View className='input-group'>
                    <View className='input-name'>联系人</View>
                    <Input className='from-input' type="text" placeholderClass='placeholder_class' name='contactsName' placeholder='请填写联系人'
                           value={info.contactsName} />
                 </View>
                 <View className='input-group'>
                    <View className='input-name'>联系电话</View>
                    <Input className='from-input' value={info.phoneNumnber} placeholderClass='placeholder_class' name='phoneNumnber' placeholder='请填联系电话' />
                 </View>
                 <View className='input-group'>
                    <View className='input-name'>微信号</View>
                    <Input className='from-input' value={info.wechatNumber} placeholderClass='placeholder_class' name='wechatNumber' placeholder='请填写微信号' />
                 </View>
                 <View className='input-group'>
                    <View className='input-name'>QQ号</View>
                    <Input className='from-input' value={info.qqNumber} placeholderClass='placeholder_class' name='qqNumber' placeholder='请填写QQ号' />
                 </View>
              </View>
           </View>
           <Button className='page-submit' formType="submit">保存</Button>
        </Form>
        }

      </View>
    )
  }
}

export default Personnel
